<template>
  <div >
    <tiny-select
      ref="selRef"
      :size="size"
      v-model="model"
      :clearable ="clearable"
      :placeholder="placeholder"
      filterable
      :show-empty-image="true"
      collapse-tags
      :options="options"
      value-field="id"
      text-field="name"
      @keydown.left.stop.prevent="left"
      @keydown.right.stop.prevent="right"
      @keydown.enter.stop.prevent="enter"
      @change="change"
      @focus.stop.prevent="focus"
    >
      <template #footer v-if="addItem">
        <div class="select-footer" @click="add">
           新增
        </div>
      </template>
    </tiny-select>
  </div>
</template>
<script  setup>
import tool from "@/utils/tool";

import {ref, onMounted,onBeforeMount} from 'vue'
const emit = defineEmits(['itemAdd', 'change', 'enter', 'left', 'right', 'focus'])
const props = defineProps({
  list: {type: Array, default: () => []},
  width: { type: [Number, String], default: '' },
  placeholder: { type: [Number, String], default: '' },
  inject: {type: Boolean, default: false},
  setDefault: {type: Boolean, default: false},
  clearable: {type: Boolean, default: true},
  addItem: {type: Boolean, default: false},
  size: { type: [Number, String], default: 'small' },
  cat: { type: [Number, String], default: '' },
  buId: { type: [Number, String], default: '' },
  invId: { type: [Number, String], default: '' },
  qty: { type: [Number, String], default: '' },
})
const selRef = ref()
const options = ref(props.list)
const model = defineModel()
const fApi = ref({})

const change = (val) => {
  if(val) {
    for (let i = 0; i < options.value.length; i++) {
      if(options.value[i].id === val) {
        setTimeout(()=>{
          emit('change', options.value[i])
          selRef.value.blur()
        },1)
      }
    }
  }
  else {
    emit('change', null)
  }
}
const focus = () => {
  emit('focus')
  setTimeout(() => {
    if(options.value.length === 0) {
      getList()
    }
  }, 100)
}
const getList = () => {
  tool.post('common/dropdown', {
    cat: props.cat,
    invId: props.invId,
    buId: props.buId,
    qty: props.qty,
  }).then(ret => {
    options.value = ret.data
  })
}
const add = () => {
  emit('itemAdd')
  selRef.value.blur()
}
const left = () => {
  emit('left')
}
const right = () => {
  emit('right')
}
const enter = () => {
  if(model.value) {
    for (let i = 0; i < options.value.length; i++) {
      if(options.value[i].id === model.value) {
        setTimeout(()=>{
          emit('change', options.value[i])
        },1)
      }
    }
  }
  emit('enter')
}
onBeforeMount(() => {
  if(props.cat) {
    getList()
  }
})
onMounted(() => {
  if(props.setDefault && props.list.length > 0) {
    model.value = props.list[0].id
  }
})


const setApi = (api) => {
  fApi.value = api
}

defineExpose({setApi})

</script>
<style scoped lang="scss">
.select-footer {
  padding: 5px;
  text-align: center;
  border-top: 1px solid #8a8f97;
  font-weight: bold;
  color: #8a8f97;
  font-size: 12px;
  &:hover {
    cursor: pointer;
    color: #1e9fff;
  }
}
</style>